<template>
  <div class="about">


  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed, watch, getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getLogin } from "@/http/api.js";
import { useStore } from "vuex";
import About from "@/views/About.vue";  //子组件
//ref可定义对象
const title = ref({
  msg: "定义对象",
});
//也可以定义其它类型
const str = ref('字符串')
const bol = ref(false)
const nul = ref(null)

//定义多个响应式数据
const state = reactive({
  list: [
    {
      id: 1,
      name: "吃饭",
      status: false,
      isShow: true,
    }
  ],
  test: "练习",
});

//计算长度-computed不要忘记返回值,数组方法如果有花括号，就必须得有return
let listLen = computed(() => {
  return state.list.filter((item) => {
    return item.status == true;
  }); //如果有花摇号，就必须得有return
});
// console.log(95, listLen);
//点击改变选中状态
let selectALL = (index) => {
  state.list[index].status = !state.list[index].status;
};
//路由跳转
let router = useRouter();
let go = () => {
  router.push({ path: "/about", query: { id: 1 } });
  // router.push({name:'About',params:{id:2}})
};
// 子传父演示
let sonclick = (value) => {
  console.log("子传父值为", value);
};
//vuex用法
const store = useStore(); //vuex中store,跟vue2中调用一样

//watch用法, 监听路由变化时触发
const route = useRoute();
watch(route, () => {
  console.log("路由走了");
});

//this用法——获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
// const { ctx }  = getCurrentInstance() //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
const { proxy } = getCurrentInstance(); //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
// proxy 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
// proxy.$attrs proxy.$emit  proxy.$nextTick   proxy.$parent  proxy.$props  proxy.$refs 等
console.log("上下文对象代替this的", proxy); //获取到了

//注意生命周期勾子需要引入,执行顺序在setup方法后,setup方法相当之前的beforecreate,created之间
onMounted(() => {
  // console.log("mouted生命周期");
  console.log("获取dom节点", proxy.$refs);
});


</script>

<style lang='scss' scoped></style>

